<template>
    <div class="set-item">
        <div class="search_box">
            <button v-on:click="scan()">扫描所有商品</button>
            选择分类: <select v-model="params.catsId">
                <option v-for="cat in cats" v-bind:value="cat.value">{{cat.name}}</option>
            </select>
            <!--<div class="cats">
                <nav-tree :value="params.catsId"
                          :model="cats"
                          class-name=""
                          children="sub_cats"
                          label-name="name"
                          :value-name="'value'"
                          is-expanded="true"
                          @selectID="selectCatId"
                ></nav-tree>
            </div>-->
        <!--商品id<input type="text" placeholder="按类别ID进行搜索" class="input-one" v-model="params.itemId">-->
            商品名称: <input type="text" placeholder="按商品名进行搜索" class="input-one" v-model="params.keyWord">
            <button @click="search()">搜索</button>
        </div>
        <div style="clear:both;"></div>

        <div class="panel panel-default">
            <!-- Table -->
            <table class="items-list table table-hover table-bordered">
                <thead>
                <tr>
                    <td>商品信息</td>
                    <!--<td>SKU信息</td>-->
                    <td>商品图</td>
                    <!--<td>评价标签</td>-->
                    <td>操作</td>
                </tr>
                </thead>
                <tbody  >
                    <tr v-for="(item,index) in items.list">
                        <td>
                            <div class="item">
                                <img :src="item.item_imgs.split(';')[0]+'_140x140.jpg'"/>
                                <div class="details">
                                    <p>商品id: {{item.num_iid}}</p>
                                    <p class="item_title" >商品名称: <a target="_blank" :href="['//detail.tmall.com/item.htm?id='+item.num_iid]">{{decodeURIComponent(item.title)}}</a></p>
                                    <p>商品原价: {{item.price}}</p>
                                    <p>商品优惠价: {{item.ump_price}}</p>
                                    <p>商品销量: {{item.period_sold_quantity}}</p>
                                </div>
                            </div>
                            <!--<div class="skus">
                                <div class="sku" v-for="sku in JSON.parse(item.skus)">
                                    <span class="color" :style="{'background-color': '#'+sku.sku_feature.color_value}"></span><span v-for="sku_name in sku.properties_name.split(';')">{{sku_name.replace(/(.*?:){3}(.*)/,"$2")}}</span>
                                </div>
                            </div>-->
                        </td>
                        <!--<td>
                            <div class="skus" v-for="sku in JSON.parse(item.skus)">
                                    <span v-for="sku_name in sku.properties_name.split(';')">{{sku_name.replace(/(.*?:){3}(.*)/,"$2")}}</span>
                            </div>
                        </td>-->
                        <td>
                            <img class="item_img" v-for="(img,img_index) in item.item_imgs.split(';')" :src="img+'_140x140.jpg'" @click="setImage(item,img_index)"/>
                            <div class="glyphicon glyphicon-plus item_img add_img" v-if="item.item_imgs.split(';').length < 4" @click="setImage(item,item.item_imgs.split(';').length)"></div>

                            <!--<div class="content" v-for="contentOne in JSON.parse(item.content)" >
                                <div class="user">
                                    <img :src="contentOne.avatar" />
                                    <p>{{contentOne.buyer_nick}}</p>
                                </div>
                                <div class="content_bd" @click="contentShow(contentOne)">{{contentOne.description}}</div>
                                &lt;!&ndash;<div class="content_imgs">
                                    <img class="content_img" v-for="img in JSON.parse(contentOne.pic_meta)" :src="img.pic"/>
                                </div>&ndash;&gt;
                                &lt;!&ndash;<div class="swiper-container">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide" v-for="img in JSON.parse(contentOne.pic_meta)"><img class="content_img" :src="img.pic"/></div>
                                    </div>
                                    <div class="swiper-button-prev"></div>
                                    <div class="swiper-button-next"></div>
                                </div>&ndash;&gt;
                            </div>-->

                        </td>
                        <!--<td>
                            <div class="tag" v-for="tag in JSON.parse(item.tags)" >
                                <p class="tag_name">{{tag.tag_name}} <span>{{tag.count}}</span></p>
                            </div>
                        </td>-->
                        <td>
                            <div class="operation">
                                <button class="edit" @click="setContent(item)">选择评价</button>
                                <button class="edit" @click="setTags(item)">选择标签</button>
                            </div>
                        </td>
                    </tr>

                </tbody>
            </table>
        </div>

        <div class="footer">
            <pagination :total-items="items.total"
                        :curr-page="params.pageNo"
                        :size-page="params.pageSize"
                        prev-show="2"
                        next-show="2"
                        @pageChange="pageChange">
            </pagination>
        </div>
    </div>
</template>

<script>
    import navTree from 'admin/js/common/nav-tree.vue';
    import pagination from 'admin/js/common/pagination.vue';

    import imageSelect from 'admin/js/common/image-select.vue';
    import contentShow from 'admin/js/common/content-show.vue';
    import contentSet from 'admin/js/common/content-set.vue';
    import tagsSet from 'admin/js/common/tags-set.vue';

    export default {
        props: [''],
        data() {
            return {
                params: {
                    keyWord: '',
                    catsId: 0,
                    pageNo: 1,
                    pageSize: 5
                },
                cats: [],
                s_id: 0,
                s_cat: {},
                items: {
                    loading: true,
                    total: 0,
                    list: [],
                    skus:[]
                },
            }
        },
        methods: {
            scan(){
                $.ajax({
                    type: 'POST',
                    url: CFG.api.top.getScanAllItems,
                    dataType: 'json',
                    data: {},
                    error: function (error) {
                        //alert(JSON.stringify(error));
                    },
                    success: function (response) {
                        if (response.err) {
                            //alert(response.err.msg);
                            //response.err.sub_msg = decodeURIComponent(response.err.sub_msg);
                            //fn.tx(response);
                        } else {
                            console.log(response);
                            alert('扫描完成');
                        }
                    }
                });
            },
            selectCatId(s_id,item){
                this.params.catsId = item.value;
                this.s_cat = item;
            },
            search(){
                this.params.pageNo = 1;
                this.getItems();
            },
            setImage(item,index){
                var self = this;
                //这是个动态实时加载的组件
                var imageS = Vue.extend(imageSelect);
                imageS = new imageS;

                imageS.temp = {
                    config: {
                        title: '图片选择',
                        content: '',
                        style: {
                            width: 920
                        }
                    }
                };

                imageS.item_img = item.item_imgs.split(';')[index];
                imageS.index = index;

                $(".app").append(imageS.$mount().$el);
                imageS.$on("pic-change", function (item_img) {
                    var imgs = item.item_imgs.split(';');
                    imgs[index] = item_img;
                    item.item_imgs = imgs.join(';');


                    $.ajax({
                        type: 'POST',
                        url: CFG.api.mac.setItem,
                        dataType: 'json',
                        data: {
                            num_iid: item.num_iid,
                            item_imgs: item.item_imgs
                        },
                        error: function (error) {
                            //alert(JSON.stringify(error));
                        },
                        success: function (response) {
                            if (response.err) {
                                //alert(response.err.msg);
                                //response.err.sub_msg = decodeURIComponent(response.err.sub_msg);
                                //fn.tx(response);
                            } else {

                            }
                        }
                    });

                });
            },
            contentShow(contentOne){
                var self = this;
                //这是个动态实时加载的组件
                var contentS = Vue.extend(contentShow);
                contentS = new contentS;
                contentS.temp = {
                    config: {
                        title: '商品评价',
                        content: '',
                        style: {
                            width: 920
                        }
                    }
                };
                contentS.content = contentOne;

                $(".app").append(contentS.$mount().$el);
            },
            setContent(item){
                var self = this;
                //这是个动态实时加载的组件
                var contentS = Vue.extend(contentSet);
                contentS = new contentS;
                contentS.temp = {
                    config: {
                        title: '设置商品评价',
                        content: '',
                        style: {
                            width: 920
                        }
                    }
                };
                contentS.params.itemId = item.num_iid;

                $(".set-item").append(contentS.$mount().$el);
                contentS.$on('show-coverq', function () {
                    self.$emit('show-cover', false);
                })
                contentS.$on("content-change", function (content) {
                    item.content = content;
                });
                this.$emit("show-cover", true);
            },
            setTags(item){
                var self = this;
                //这是个动态实时加载的组件
                var tagsS = Vue.extend(tagsSet);
                tagsS = new tagsS;
                tagsS.temp = {
                    config: {
                        title: '设置标签',
                        content: '',
                        style: {
                            width: 920
                        }
                    }
                };
                tagsS.params.itemId = item.num_iid;

                $(".set-item").append(tagsS.$mount().$el);
                tagsS.$on('show-coverq', function () {
                    self.$emit('show-cover', false);
                })
                tagsS.$on("tags-change", function (tags) {
                    item.tags = tags;
                });
                this.$emit("show-cover", true);
            },
            pageChange(i){
                var self = this;
                self.params.pageNo = i;
                this.getItems();
                $('.right').scrollTop(0);
            },
            getItems:function(){
                var self = this;
                $.ajax({
                    type: 'POST',
                    url: CFG.api.mac.getItems,
                    dataType: 'json',
                    data: self.params,
                    error: function (error) {
                        //alert(JSON.stringify(error));
                    },
                    success: function (response) {
                        if (response.err) {
                            //alert(response.err.msg);
                            //response.err.sub_msg = decodeURIComponent(response.err.sub_msg);
                            //fn.tx(response);
                        } else {
                            self.items.list = response.data.list;
                            self.items.total = response.data.total;
                            self.items.loading = false;

                        }
                    }
                });
            }
        },
        created(){
            var self = this;

            //取分类
            $.ajax({
                type:'POST',
                url: CFG.api.mac.getCats,
                dataType:'json',
                data:{
                    //parentID: 0
                },
                error:function(error){
                    //alert(JSON.stringify(error));
                },
                success:function(response){
                    if(response.err){
                        //alert(response.err.msg);
                        //response.err.sub_msg = decodeURIComponent(response.err.sub_msg);
                        //fn.tx(response);
                    }else{
                        var t_cat = [{
                            cid: 0,
                            name: '全部分类',
                            sub_cats: response.data,
                            value: 0
                        }];
                        $.each(response.data,function(i,t){
                            t_cat.push(t);

                            $.each(t.sub_cats,function(ii,tt){
                                tt.name = '-'+tt.name;
                                t_cat.push(tt);
                            })

                            t.sub_cats = [];
                        });

                        self.cats = t_cat;
                    }
                }
            });

            //取商品
            $.ajax({
                type: 'POST',
                url: CFG.api.mac.getItems,
                dataType: 'json',
                data: self.params,
                error: function (error) {
                    //alert(JSON.stringify(error));
                },
                success: function (response) {
                    if (response.err) {
                        //alert(response.err.msg);
                        //response.err.sub_msg = decodeURIComponent(response.err.sub_msg);
                        //fn.tx(response);
                    } else {
                        self.items.list = response.data.list;
                        self.items.total = response.data.total;
                        self.items.loading = false;

                        self.$nextTick(function(){
                            $('.swiper-container').each(function(i,t){

                                var mySwiper = new Swiper(t, {
                                    nextButton: '.swiper-button-next',
                                    prevButton: '.swiper-button-prev',
                                })

                            });
                        });
                    }
                }
            });
        },
        components: {
            navTree,
            pagination,
            imageSelect,
            contentSet,
            tagsSet
        }
    }
</script>

<style lang="less">
    .set-item {
        position: relative;

        .search_box {
            padding: 10px;
            background-color: #f2f2f2;

        }

        .items-list {

            .item {
                display: flex;
                padding-bottom: 5px;

                img {
                    width: 140px;
                }

                .details {
                    padding-left: 10px;
                    text-align: left;
                }

                p {
                    width: 300px;
                    height: 20px;
                    line-height: 20px;
                    overflow: hidden;
                }

                .item_title{
                    height: 40px;
                }

            }

            .skus {
                width: 480px;
                text-align: left;

                .sku {
                    background-color: #eee;
                    border-radius: 4px;
                    border: 1px solid #bfcbd9;
                    padding: 2px 5px;
                    margin-right: 5px;
                    margin-bottom: 10px;
                    display: inline-block;

                    .color {
                        padding: 1px 9px;
                        margin: 4px;
                    }
                }
            }

            .item_img {
                margin-right: 5px;
                margin-bottom: 5px;
                vertical-align: middle;
                border: 1px solid #ddd;
                cursor: pointer;
            }

            .add_img {
                width: 140px;
                height: 140px;
                line-height: 140px;
            }

            .content {
                display: flex;
                background-color: #eee;
                margin-bottom: 5px;
                padding: 3px 0;
                border-radius: 4px;
                border: 1px solid #bfcbd9;

                .user {
                    padding: 3px 3px;

                    img{
                        width: 40px;
                        height: 40px;
                    }

                    p{
                        width: 80px;
                        height: 20px;
                        line-height: 20px;
                        overflow: hidden;
                    }
                }
                .content_bd {
                    width: 200px;
                    height: 60px;
                    line-height: 20px;
                    overflow: hidden;
                }

                .content_imgs {
                    display: flex;
                    flex-wrap: wrap;
                    width: 101px;
                    height: 64px;
                    padding-left: 5px;
                    overflow: hidden;

                    img {
                        width: 32px;
                        height: 32px;
                        padding-right: 2px;
                        padding-bottom: 2px;
                    }
                }

                .swiper-container {
                    width: 60px;
                    height: 60px;

                    img{
                        width: 60px;
                        height: 60px;
                    }

                    .swiper-button-prev {
                        display: none;
                        width: 10px;
                        left: 0;
                        background-size: 10px 44px;
                        background-color: rgba(255,255,255,0.5);
                    }
                    .swiper-button-next {
                        display: none;
                        width: 10px;
                        right: 0;
                        background-size: 10px 44px;
                        background-color: rgba(255,255,255,0.5);
                    }

                    &:hover{
                     .swiper-button-prev,
                     .swiper-button-next {
                         display: block;
                     }

                    }
                }
            }

            .tag {
                margin-bottom: 5px;
                border-radius: 4px;
                border: 1px solid #bfcbd9;
                display: inline-block;
                padding: 2px 6px;
                margin-right: 10px;

                span {
                    padding-left: 10px;
                }
            }

            td {
                vertical-align: middle;
                text-align: center;
            }

            p input {
                margin-top: 5px;
                width: 80px;
            }

            .operation {
                display:block;
                text-align: left;

                button {
                    margin-bottom: 10px;
                }
            }

        }

    }


</style>